$mq-picture: $mq-large;

@import 'header';

.streamer-edit {
  .streamer-header {
    margin-bottom: 2em;
    flex-direction: column;

    @include breakpoint($mq-picture) {
      flex-direction: row;
    }

    .picture-create {
      @extend %flex-center;

      justify-content: center;
      display: flex;
      margin-top: 40px;
      margin-bottom: 10px;

      @include breakpoint($mq-picture) {
        margin: 0;
        width: 300px;
        height: 300px;
      }
    }

    .upload_picture .button {
      text-align: center;
      margin: 100px 30px 0 30px;
    }

    .picture-edit {
      text-align: center;
    }
  }

  .status {
    @extend %box-radius;

    padding: 1em 1.5em;
    margin-bottom: 2em;
    background: $c-bg-zebra;

    &::before {
      font-size: 2em;
      margin-right: 0.4em;
    }

    form {
      display: inline;
    }
  }

  .mod {
    margin-bottom: 6em;
  }

  .mod_log {
    @extend %break-word;
  }

  #site_header a.preview {
    display: block;
    margin-top: 40px;
    text-align: center;
  }
}

.streamer-rules li {
  margin: 0.9em 0 0.9em 2.2em;
  line-height: 1.6em;
  text-indent: -2.2em;

  &::before {
    font-family: 'lichess';
    content: '';
    font-size: 1.5em;
    margin-right: 0.5em;
    vertical-align: middle;
    opacity: 0.8;
  }
}

.streamer-picture {
  form {
    padding: 30px;
    border-top: $border;
    text-align: center;
  }

  .cancel {
    padding: 40px;
    border-top: $border;
  }

  .forms > *:first-child {
    margin-top: 40px;
  }

  .picture_wrap {
    text-align: center;
  }
}
